<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-01-22 16:38:38
 * @Description: 
-->
<template>
  <div class="body-container">
    <div class="body-main">
      <div
        class="side-container"
        :style="`height:${view.height - 60}px;width:${
          MenuStateStore.isCollapse ? 70 : 300
        }px`"
      >
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          :collapse="MenuStateStore.isCollapse"
          router
          v-loading="menuLoading"
          :style="`height:${view.height - 120}px;`"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Connection />
              </el-icon>
              <span>渲染文件管理</span>
            </template>
            <el-menu-item index="/index/general/randerManage/randerList"
              >渲染文件注册</el-menu-item
            >
            <!-- <el-menu-item index="/index/general/randerManage/randerBinding">渲染文件绑定</el-menu-item> -->
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>
              <span>算法注册管理</span>
            </template>
            <el-menu-item index="/index/general/algorithmManage/algorithmType"
              >算法类型管理</el-menu-item
            >
            <el-menu-item index="/index/general/algorithmManage/algorithmList"
              >通用算法列表</el-menu-item
            >
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <document />
              </el-icon>
              <span>算法流程管理</span>
            </template>
            <el-menu-item index="/index/general/processManage/processType"
              >算法流程类别管理</el-menu-item
            >
            <el-menu-item index="/index/general/processManage/processList"
              >算法流程列表</el-menu-item
            >
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <document />
              </el-icon>
              <span>任务管理</span>
            </template>
            <el-menu-item index="/index/general/executeManage/executeList"
              >任务列表</el-menu-item
            >
          </el-sub-menu>
          <el-sub-menu index="5" v-show="subsystemStore.getSubsystem=='4dec5e9f-d4d4-4bba-a807-e052514ee57e'">
            <template #title>
              <el-icon>
                <document />
              </el-icon>
              <span>生态红线智能监测</span>
            </template>
            <el-menu-item index="/index/general/EngineManage/EngineList"
              >引擎管理</el-menu-item
            >
            <el-menu-item index="/index/general/modelManage/modelList"
              >AI模型自主训练与模型库</el-menu-item
            >
            <el-menu-item index="/index/general/modelManage/modelTraining"
              >模型训练任务管理</el-menu-item
            >
            <el-menu-item index="/index/general/swatchManage/swatchList"
              >样本库</el-menu-item
            >
            <el-menu-item index="/index/general/nodeManage/nodeGraph"
              >一体化终端节点管理
              </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
      <div
        class="body-warp"
        :style="`height:${view.height - 60}px;;background:${
          isDark ? '#202223' : '#E5E9F2'
        };`"
      >
        <div class="breadcrumb-container">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="item in route.matched">
              {{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div
          class="body-inner"
          :style="`background:${isDark ? '#1B1B1F' : '#fff'};`"
        >
          <el-row>
            <el-col :span="24">
              <router-view></router-view>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import { useSubsystemStore } from "@/store/subsystem";
import { useDark, useToggle } from '@vueuse/core'
import {
    Sunny, Moon, UserFilled, Document,
    Menu as IconMenu, Menu, Fold,
    Location, Edit, Expand, ArrowRight,
    Setting, Connection,
} from '@element-plus/icons-vue'
import { useMenuStateStore } from "@/store/page";
import { useRoute } from 'vue-router'
import * as _ from "lodash";
const subsystemStore = useSubsystemStore();
const route = useRoute();
// import { ElMessage, ElMessageBox } from "element-plus";
let isDark = ref(useDark())
const activeIndex = ref(route.path)
const MenuStateStore = useMenuStateStore()
var view = reactive({
    height: window.innerHeight,
});
window.onresize = _.debounce(() => {
    view.height = window.innerHeight;
}, 100);

const menuLoading = ref(false);
watch(
  () => subsystemStore.getSubsystem,
  () => {
    menuLoading.value = true;
    setTimeout(() => {
      menuLoading.value = false;
    }, 1000); // 1-second loading
  }
);
</script>
<style lang="scss" scoped>
.body-container {
  display: flex;
  justify-content: center;

  .body-main {
    width: 100%;
    min-width: 1482px;
    display: flex;

    .side-container {
      width: 300px;
      overflow: scroll;
    }

    .body-warp {
      width: 100%;
      padding: 0 30px;

      .breadcrumb-container {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
      }

      .body-inner {
        height: calc(100% - 60px);
        width: 100%;
      }
    }
  }
}
</style>
<style lang="scss"></style>
